<template>
<div>
  <div>
    <el-input style="width: 200px" placeholder="查询标题" v-model="title"></el-input>
    <el-button type="primary" style="margin-left: 10px" @click="load(1)">查询</el-button>
    <el-button type="info" @click="reset">重置</el-button>
  </div>
  <div style="margin: 10px 0">
    <el-button type="primary" plain @click="handleAdd">新增</el-button>
    <el-button type="danger" plain @click="delBatch">批量删除</el-button>
  </div>

  <el-table :data="tableData" stripe :header-cell-style="{ backgroundColor: 'aliceblue', color: '#666' }" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" align="center"></el-table-column>
    <el-table-column prop="id" label="编号" width="70" align="center"></el-table-column>
    <el-table-column prop="title" label="标题" align="center"></el-table-column>
    <el-table-column prop="description" label="简介" align="center"></el-table-column>
    <el-table-column prop="content" label="内容"  align="center">
      <template v-slot="scope">
        <el-button type="warning" plain @click="showContent(scope.row.content)" size="mini">显示内容</el-button>
      </template>
    </el-table-column>
    <el-table-column prop="content" label="详情页"  align="center">
      <template v-slot="scope">
        <el-button type="success" plain @click="$router.push('/newsDetail?id=' + scope.row.id)" size="mini">在详情页展示</el-button>
      </template>
    </el-table-column>
    <el-table-column prop="author" label="发布人" align="center"></el-table-column>
    <el-table-column prop="time" label="发布时间" align="center"></el-table-column>
    <el-table-column label="操作" align="center" width="180">
      <template v-slot="scope">
        <el-button size="mini" type="primary" plain @click="handleEdit(scope.row)">编辑</el-button>
        <el-button size="mini" type="danger" plain @click="del(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <div style="margin: 10px 0">
    <el-pagination
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="total">
    </el-pagination>
  </div>

  <el-dialog title="实习资料" :visible.sync="fromVisible" width="60%" @close="closeDialog">
    <el-form :model="form" label-width="80px" style="padding-right: 20px" :rules="rules" ref="formRef">
      <el-form-item label="标题" prop="title">
        <el-input v-model="form.title" placeholder="标题"></el-input>
      </el-form-item>
      <el-form-item label="简介" prop="description">
        <el-input v-model="form.description" placeholder="简介"></el-input>
      </el-form-item>
      <el-form-item label="内容" prop="content">
        <div id="editor"></div>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="fromVisible = false">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>

  <el-dialog title="内容" :visible.sync="fromVisible1" width="60%">
    <el-card class="w-e-text">
      <div v-html="content"></div>
    </el-card>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="fromVisible1 = false">确 定</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
import E from "wangeditor"
import hljs from 'highlight.js'

export default {
  name: "News",
  data() {
    return {
      tableData: [],  // 所有的数据
      pageNum: 1,   // 当前的页码
      pageSize: 5,  // 每页显示的个数
      username: '',
      title: '',
      total: 0,
      fromVisible: false,
      form: {},
      user: JSON.parse(localStorage.getItem('honey-user') || '{}'),
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' },
        ]
      },
      ids: [],
      editor: null,
      content: '',
      fromVisible1: false
    }
  },
  created() {
    this.load()
  },
  methods: {
    setRichText() { // 富文本编辑器
      this.$nextTick(() => {
        this.editor = new E(`#editor`)
        this.editor.highlight = hljs
        this.editor.config.uploadImgServer = this.$baseUrl + '/file/editor/upload'
        this.editor.config.uploadFileName = 'file'
        this.editor.config.uploadImgHeaders = {
          token: this.user.token
        }
        this.editor.config.uploadImgParams = {
          type: 'img',
        }
        this.editor.config.uploadVideoServer = this.$baseUrl + '/file/editor/upload'
        this.editor.config.uploadVideoName = 'file'
        this.editor.config.uploadVideoHeaders = {
          token: this.user.token
        }
        this.editor.config.uploadVideoParams = {
          type: 'video',
        }
        this.editor.create()  // 创建
      })
    },
    showContent(content) {
      this.content = content
      this.fromVisible1 = true
    },
    closeDialog() { // 在dialog销毁时调用
      // 销毁编辑器
      this.editor.destroy()
      this.editor = null
    },
    delBatch() {
      if (!this.ids.length) {
        this.$message.warning('请选择数据')
        return
      }
      this.$confirm('您确认批量删除这些数据吗？', '确认删除', {type: "warning"}).then(response => {
        this.$request.delete('/news/delete/batch', { data: this.ids }).then(res => {
          if (res.code === '200') {   // 表示操作成功
            this.$message.success('操作成功')
            this.load(1)
          } else {
            this.$message.error(res.msg)  // 弹出错误的信息
          }
        })
      }).catch(() => {})
    },
    handleSelectionChange(rows) {   // 当前选中的所有的行数据
      this.ids = rows.map(v => v.id)
    },
    del(id) {
      this.$confirm('您确认删除吗？', '确认删除', {type: "warning"}).then(response => {
        this.$request.delete('/news/delete/' + id).then(res => {
          if (res.code === '200') {   // 表示操作成功
            this.$message.success('操作成功')
            this.load(1)
          } else {
            this.$message.error(res.msg)  // 弹出错误的信息
          }
        })
      }).catch(() => {})
    },
    handleEdit(row) {   // 编辑数据
      this.form = JSON.parse(JSON.stringify(row))  // 给form对象赋值  注意要深拷贝数据
      this.fromVisible = true   // 打开弹窗

      this.setRichText()
      setTimeout(() => { // 延迟加载
        this.editor.txt.html(row.content)  // 设置富文本内容
      }, 0)

    },
    handleAdd() {   // 新增数据
      this.form = {}  // 新增数据的时候清空数据
      this.fromVisible = true   // 打开弹窗

      this.setRichText()
    },
    save() {   // 保存按钮触发的逻辑  它会触发新增或者更新
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          // 获得富文本编辑框的信息
          let content = this.editor.txt.html()   // 设置html
          this.form.content = content

          this.$request({
            url: this.form.id ? '/news/update': '/news/add',
            method: this.form.id ? 'PUT' : 'POST',
            data: this.form
          }).then(res => {
            if (res.code === '200') {  // 表示成功保存
              this.$message.success('保存成功')
              this.load(1)
              this.fromVisible = false
            } else {
              this.$message.error(res.msg)  // 弹出错误的信息
            }
          })
        }
      })
    },
    load(pageNum) {  // 分页查询
      if (pageNum)  this.pageNum = pageNum
      this.$request.get('/news/selectByPage', {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          title: this.title
        }
      }).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    reset() {
      this.title = ''
      this.load()
    },
    handleCurrentChange(pageNum) {
      this.load(pageNum)
    },
  }
}
</script>

<style scoped>

</style>
